<!-- 1.div的目的：失焦校验校验信息追加在div后边; 2.输入框放在下拉框前边目的：input校验失败时，通过‘+’相邻选择器修改下拉框的样式 -->
<div class="ti3-phonenumber-container">
  <input
    #input
    type="text"
    tiText
    class="ti3-phonenumber-input"
    [ngClass]="{'ti3-phonenumber-select-disable':selectDisabled}"
    [(ngModel)]="model"
    [tiValidation]="validation"
    [errorMessageWrapper]="nativeElement"
    [tiPhone]="country"
    [id]="appendId('input')"
    [placeholder]="'tiPhonenumber.placeholder' | tiTranslate"
  />
  <ti-select
    #select
    class="ti3-phonenumber-select"
    valueKey="ISO2Code"
    [searchKeys]="['ISO2Code', 'Name', 'CountryCode']"
    [options]="options"
    [(ngModel)]="country"
    (ngModelChange)="onNgModelChange($event)"
    [disabled]="selectDisabled"
    (select)="onSelect($event)"
    [searchable]="true"
    [id]="appendId('select')"
    [noDataText]="'tiPhonenumber.not_found' | tiTranslate"
    panelWidth="200px"
  >
    <ng-template #item let-item> {{item.Name}}(+{{item.CountryCode}}) </ng-template>
    <ng-template #selected let-select> +{{select.CountryCode}} </ng-template>
  </ti-select>
</div>
